import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import { ConfigProvider } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import { AuthProvider } from './contexts/AuthContext';
import ProtectedRoute from './components/ProtectedRoute';
import AppLayout from './components/AppLayout';
import Login from './pages/Login';
import Home from './pages/Home';
import VideoProcess from './pages/VideoProcess';
import { StyleProvider } from '@ant-design/cssinjs';

// 全局错误边界（实际项目中可以实现更完善的错误处理）
const ErrorFallback = () => (
  <div style={{ padding: '40px', textAlign: 'center' }}>
    <h2>抱歉，应用发生了错误</h2>
    <p>请刷新页面或联系管理员</p>
  </div>
);

function App() {
  return (
    <ConfigProvider locale={zhCN}>
      <StyleProvider hashPriority="high">
        <Router>
          <AuthProvider>
            <Routes>
              {/* 登录页面 */}
              <Route path="/login" element={<Login />} />

              {/* 受保护的路由 */}
              <Route element={
                <ProtectedRoute>
                  <AppLayout />
                </ProtectedRoute>
              }>
                <Route path="/" element={<Home />} />
                <Route path="/video" element={<VideoProcess />} />
              </Route>

              {/* 404页面重定向 */}
              <Route path="*" element={<Navigate to="/" replace />} />
            </Routes>
          </AuthProvider>
        </Router>
      </StyleProvider>
    </ConfigProvider>
  );
}

export default App;
